/**
 * 图片懒加载JS
 *
 * 使用方法：在页面中的任意位置的img标签内，去除src标记，或者将其指向一张blank图片，然后增加一个非标准属性original值为图片地址
 * 即可实现懒加载功能 懒加载JS为页面通用JS，会在每一个页面加载，但是需要注意，图片一定要在页面加载完之前写进DOM中，否则初始化时不会将其列入范围内。
 * demo:
 *  1. $(function($) { initImageLoad(); });
 *  2. <img src="/front/images/w_400px.jpg" original="${product.imgUrl!}" />
 *
 * @author JiaZM
 * @date 2013-03-26
 */

/* 懒加载延迟定时器，无需改变 */
var lazyLoadInterval = null;
/* 用户停止滚动之后懒加载延迟，一般为500ms */
var lazyLoadDelay = 200;
/* 向下扩展的高度，一般会加载一屏+一定高度之内的图片，可以适当调整（0-infinity），为了性能考虑，一般设为50 */
var extendFromBottom = 50;
imgLazyLoad = {
	/* 需要懒加载图片的集合 */
	imgArray : [],
	/* 初始化方法，用于分析页面中哪些图片(img)需要懒加载，可视情况再次调用此方法，但是性能较差。 */
	loadImg : function() {
		jQuery("img").each(function() {
			if (typeof (jQuery(this).attr("original")) == "undefined") {
			} else {
				imgLazyLoad.imgArray.push(this);
			}
		});
	},
	/* 计算页面底部高度 */
	pageBottom : function() {
		return document.documentElement.clientHeight
				+ Math.max(document.documentElement.scrollTop,
						document.body.scrollTop) + extendFromBottom;
	},
	/* 计算页面头部高度 */
	pageTop : function() {
		return Math.max(document.documentElement.scrollTop,
				document.body.scrollTop);
	},
	/* 加载一屏的图片，位置与当前页面滚动到得位置有关 */
	load : function() {
		var pageTop = imgLazyLoad.pageTop();
		var pageBottom = imgLazyLoad.pageBottom();
		for ( var i = 0, l = imgLazyLoad.imgArray.length; i < l; i++) {
			var image = jQuery(imgLazyLoad.imgArray[i]);
			if (image) {
				if (image.offset().top <= pageBottom
						&& image.offset().top >= pageTop) {
					var src2 = image.attr("original");
					if (src2) {
						image.attr("src", src2).removeAttr("original");
					}
				}
			}
		}
	}
};
/* 初始化懒加载图片方法，包括绑定事件，初始化等 */
function initImageLoad() {
	imgLazyLoad.loadImg();
	if (imgLazyLoad.imgArray.length > 0) {
		jQuery(window).bind("scroll", function() {
			if (lazyLoadInterval) {
				clearInterval(lazyLoadInterval);
			}
			lazyLoadInterval = setTimeout("imgLazyLoad.load()", lazyLoadDelay);
		});
		imgLazyLoad.load();
	}
	window.scrollTo(0, 0);
}
$(function(){
	initImageLoad();
});
